<template>
  <div class="process">
    <div class="toper">
      <div class="head">
        <div class="title">简报制作</div>
        <div class="desc">半自动化生成或舆情分析报告<i></i></div>
      </div>
      <div class="liuchen">
          <div class="left">
              <step :data='1'></step>
          </div>
          <div class="right">
            <div class="num">
              <b>{{currentNum}}</b>
              <div>当前素材数</div>
            </div>
            <div class="edit">
              <div class="generate" @click="$router.push('/brief/confirmsc')">生成简报</div>
              <div class="choose" @click="$router.push('/brief/confirmsc')">进入素材库</div>
            </div>
          </div>
      </div>
    </div>

    <div class="tab">
      <span class="active">素材库</span>
      <span @click="$router.push('/brief/list')">舆情列表</span>
      <span @click="$router.push('/brief/textsearch')">全文搜索</span>
    </div>
    <div class="checkchose datePanel">
      <div class="condi">监测时间</div>
      <div class="time">
        <div class="body">
          <el-date-picker
          style="margin-right:0"
            v-model="timerange[0]"
            type="datetime"
            :picker-options="pickerBeginDateafter"
            placeholder="选择日期时间">
          </el-date-picker>
          <div class="gang"></div>
          <el-date-picker
            v-model="timerange[1]"
            type="datetime"
            :picker-options="pickerBeginDateBefore"
            placeholder="选择日期时间">
          </el-date-picker>
          <el-button @click="getmessage()">确定</el-button>
        </div>        
      </div>
      <div class="condi">筛选条件</div>
      <div class="screen">
          <div class="list" v-for="(item,windex) in condition.radiodata" :key="windex">
              <label>{{item.label}}</label>
              <div class="list-item">
                <span  v-for="(i,lindex) in item.item" :key="lindex" :class="{active:item.checked==i}"  @click="checkItem(item,lindex)">{{i}}</span>
              </div>
          </div>
      </div>
    </div>
    <!-- <div class="news-list">
      <div class="news-item" v-for="(item,i) in webSite"  :key="i" @click="clikSource(item.websiteName)">
        {{item.websiteName}}(<span>{{item.doc_count}}</span>)
      </div>
    </div> -->
    <div class="bodyer">
      <div class="handle">
        <el-checkbox class="checkbox" @change="checkAll()" v-model="checkAllFlag"></el-checkbox>
        <el-button class="right" @click="addAll()">批量加入</el-button>
      </div>
      <div class="news">
        <div class="item" v-for="(item,index) in list" :key="index">
          <div class="checkbox">
            <el-checkbox v-model="item.checked" @change="checkvli()"></el-checkbox>
          </div>
          <div class="content">
            <div class="main">
              <div class="pic">
                <div class="img" v-bind:style="{backgroundImage:item.urlimg}"></div>
                <div class="label">{{item.webSite.substring(0,6)}}..</div>
              </div>
              <div class="text">
                <div class="head">
                  <div class="title" @click="queryarticle(item)" v-html="filterHtml(item.title.substring(0,25))"></div>
                  <div class="qx">倾向性: <TendLabel :tend="parseInt(item.positiveOrNegative)">{{item.title}}</TendLabel></div>
                </div>
                <div class="body" v-html="filterHtml(item.content)"></div>
              </div>
            </div>
            <div class="imgbtns">
              <div class="imbtn add" @click="add(item)" :class="{addActive:item.addmaterial}">{{item.addmaterial== true?' 已加入简报素材':'加入简报素材'}}</div>
            </div>
          </div>
          <div class="time">
            <div>{{item.poTime}}</div>
          </div>
        </div>
      </div>
      <div class="pagination">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="pageNum"
		      :page-sizes="[30, 50, 80, 100]"
		      :page-size="pageSize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		  </div>
    </div>
  </div>


</template> 
<script>
  import step from './step'
  import DateShow from 'components/Home/DateShow'
  import TendLabel from 'components/common/TendLabel'
  import moment from 'moment'
  let condition={
      id:'',
      startTime:moment().startOf('day'),
      endTime:moment(),
      webSite:'',
      radiodata:[
        {
          label: '时间排序',
          item: ['时间升序','时间降序'],
          orderby:'asc',
          checked:'时间升序'
        }]
}
  export default {
    name: 'chosematerial',
    components:{step,DateShow,TendLabel},
    data(){
      return {
        condition,
        pageNum:1,//第几页
        pageSize:30,//条数
        checkAllFlag:false,
        list:[],
        total:0,
        webSite:[],
        currentNum:0,
        checkboxModel:[],
        pickerBeginDateBefore: {
          disabledDate: (time) => {
              let beginDateVal = this.timerange[0];
              if (beginDateVal) {
                  return time.getTime() < beginDateVal;
              }
          }
        },
        pickerBeginDateafter: {
          disabledDate: (time) => {
              let afterDateVal = this.timerange[1];
              if (afterDateVal) {
                  return time.getTime() > afterDateVal;
              }
          }
        },
        timerange:['',''],

      }
    },
    watch:{
      condition:{
        handler:function(val,oldVal){
            this.timerange=[val.startTime,val.endTime]
            this.querymessage()
        },
        deep:true
      }
    },
    mounted(){
      this.querymessage()
      this.init()
    },
    filters:{
      fomartDate:function(time){
        return moment(parseInt(time)).format('YYYY-MM-DD')
      },
      fomartTime:function(time){
        return moment(parseInt(time)).format('HH:mm:ss')
      },
    },
    methods:{
      checkAll(){
        this.list.forEach((value,index)=>{
          value.checked = this.checkAllFlag
        })
      },
      checkvli(){
        var _this=this
        this.checkboxModel=[]
        this.list.forEach((value)=>{
          if(value.checked){
            _this.checkboxModel.push(value.favoriteId)
          }
        })
        if(this.checkboxModel.length==this.list.length){
          this.checkAllFlag=true
        }else{
          this.checkAllFlag=false
        }
      },
      checkItem(a,lindex){
        let ra = a.item[lindex]
        a.checked = ra
        ra=="时间升序"?this.condition.radiodata[0].orderby="asc":this.condition.radiodata[0].orderby="desc"
        this.querymessage()
      },
      handleSizeChange(val){
        this.pageSize = val
        this.querymessage()

      },
      handleCurrentChange(val){
        this.pageNum = val
        this.querymessage()
      },
      clikSource(val){
        this.webSite=val
        this.querymessage()
      },
      getmessage(){
        this.condition.startTime=this.timerange[0]
        this.condition.endTime=this.timerange[1]
        this.querymessage()
      },
      filterHtml(value){
        return value.replace(/<br\/>/g, '').replace(/{{{/g,"<span class='light' style='color:red'>").replace(/}}}/g,"</span>")
      },
      //文章查询
      queryarticle(item){
        let count = 0
        if (item.doc_count&&item.doc_count==1) {
          this.$store.commit('setxxcount',{
            count:1
          });
        }
        let id = item.favoriteId
        console.log(item)
        let pirnt = item.titleContentPrint
        this.$store.dispatch('queryarticle',{
          id:id,
          keywords:this.keywords,
          titleContentPrint:pirnt,
          count:count
        });
      },
      add(item){
          let arr = []
              var _this=this
              if(localStorage.Temporarymaterial){
                arr = JSON.parse(localStorage.Temporarymaterial)
              }
                if (!arr.includes(item.favoriteId )){
                  if(arr.length<20){
                      arr.push(item.favoriteId)
                      if(!item.addmaterial){
                        this.$message.success('已加入')
                        item.addmaterial=true
                      }else{
                        return false
                      }    
                  }else{
                    this.$message.success('不能超过20条')
                    return 
                  }

      }
      localStorage.Temporarymaterial = JSON.stringify(arr)
      // item.addmaterial = !item.addmaterial
      //else{
      //     this.$message.success('已取消')  
      //   }
        this.currentNum=JSON.parse(localStorage.Temporarymaterial).length
      },
      addAll(){
        let newlist = this.list.filter(d => d.checked && d.addmaterial!=true).map(d=>d.favoriteId) 
        let arr = []
        if(localStorage.Temporarymaterial){
          arr = JSON.parse(localStorage.Temporarymaterial)
        }
        if(arr.concat(newlist).length<20){
          let JS = [...new Set(arr.concat(newlist))]
          localStorage.Temporarymaterial = JSON.stringify(JS)  
          this.currentNum=JSON.parse(localStorage.Temporarymaterial).length
          this.list.map((d)=>{
            if(d.checked){
              d.addmaterial = true
            }
          })
          this.$message.success('加入成功')
        }else{
          this.$message.success('不能超过20条')
          return
        }
      },
      init(){
          if(localStorage.Temporarymaterial){
              this.currentNum=JSON.parse(localStorage.Temporarymaterial).length
          }
      },
      async querymessage(){
        let s = moment(this.condition.startTime).format('YYYY-MM-DD HH:mm:ss')
        let e = moment(this.condition.endTime).format('YYYY-MM-DD HH:mm:ss')
        let res = await this.$http.post('vrv-monitor-platform-web/collection/queryMaterial',{
            startQueryTime:s =='Invalid date'?'': s,
            endQueryTime:e =='Invalid date'?'': e,
            sortType:this.condition.radiodata[0].orderby,
            pageNo:this.pageNum,
            pageSize:this.pageSize
        })
      this.total = res.body.totals
      let value = res.body.data
      
      this.list = (value[0] && value[0]['data']) ? value.map(d => d.data[0]) : value
      this.list.map((d)=>{
        this.$set(d,'checked', false )
        let imgurl = d.domain
        this.$http.get(`static/${imgurl}.png`).then(res=>{
          this.$set(d,'urlimg', `url(static/${imgurl}.png)` )
        }).catch(err=>{
          this.$set(d,'urlimg',"url('static/defult.png')")
        })
        var _this=this
        _this.$set(d,'addmaterial', false)
        if(localStorage.Temporarymaterial){
          JSON.parse(localStorage.Temporarymaterial).forEach((item)=>{
            if(item==d.favoriteId){
              _this.$set(d,'addmaterial', true)
            }
          })
        }
      })
      },
      async getWebSite(){
          let res = await this.$http.get('vrv-monitor-platform-web/data/queryTodayOpinion?aggsField=webSiteType&positiveOrNegative=-1')
          let data = res.body.data
          let all = data.reduce((a, d) => a + parseInt(d.doc_count), 0)
          data.unshift({
            websiteName:'全部',
            doc_count:all,
            websiteId:'-1'
          })
          this.webSite = data
          console.log(this.webSite)
        }
    }
  }
</script>

<style lang="stylus" scoped>
  .process
    background #f0f5fb 
  .toper
    height 250px
    padding 30px
    background #ffffff
    margin-bottom 8px
    box-sizing border-box
    .head
      font-size 0
      border-bottom 1px solid #dcdcdc
      height 40px
      box-sizing border-box
      >.title
        display inline-block
        font-size 1.3rem
        color #555555
        font-weight bold
      >.desc
        display inline-block
        font-size 14px
        color #999999
        margin-left 8px
        >i 
          display inline-block
          margin-left 8px
          width 14px
          height 14px
          background-image url('img/brief-why.png')
          background-repeat no-repeat
          background-size cover
    .liuchen
      margin-top 38px
      font-size 0
      display flex
      >.left
        flex 1
      >.right   
        width 260px
        >.num 
          text-align center
          float left
          >b
            color #e75a46
            font-size 40px
          >div
            font-size 18px
            color #333333
        >.edit
          float right 
          >div
            width 120px
            height 34px
            color #fff
            background-position 10% 55%
            font-size 12px
            line-height 34px
            text-indent 40px
            background-repeat no-repeat
            cursor pointer
            &.generate
              background-color #e85a47
              background-image url(img/generate.png)
              border-radius 8px
            &.choose
              background-color #e85a47
              background-image url(img/choose.png)
              border-radius 8px
              margin-top 10px

  .tab
    display flex
    padding-left 30px
    box-sizing border-box
    >span 
      width 120px
      height 40px
      box-sizing border-box
      text-align center
      border-top-left-radius 4px
      border-top-right-radius 4px
      background #fcfcfc
      line-height 40px
      margin-right 8px
      color #555555
      font-size 14px
      cursor pointer
      &.active  
        background #ffffff
        border 1px solid #dcdcdc
        color #ec6941
        font-weight bold
        border-bottom none
  .checkchose
    height 62px
    border-top 1px solid #dcdcdc
    border-bottom 1px solid #dcdcdc
    display flex
    background #ffffff
    >div
      &.screen
        flex 1
        padding-left 40px
        align-items center
        display flex
      &.time
        width 628px
        line-height 62px
        position relative
        >.body
          padding-left 20px
          position relative
      &.condi
        width 140px
        line-height 62px
        text-align 140px
        color #333333
        font-size 14px
        background #e5e5e5
        text-align center
    .gang
      display  inline-block
      width 15px
      height 3px
      background #898989
      margin 0 3px
    .list
      line-height 22px
      margin-right 40px
      >label
        font-size 12px
        color #333333
        padding 0
        display inline-block
        margin-right 10px
      .list-item
        color #999999
        font-size 0
        display inline-block
        >span 
          padding 0 8px
          height 22px
          line-height 22px
          font-size 12px
          display inline-block
          border-radius 3px
          margin-right 5px
          text-align center
          cursor pointer
          &.active
            color #ffffff
            background #e75a46
      &:nth-child(3n)
        margin-right 0
  .selecte
    height 34px
    line-height 34px
    padding 5px 0
    padding-left 40px
    display flex
    border-bottom 1px solid #dcdcdc
    background #eeeeee
    >div
      font-size 14px
      color #666666
      &:nth-child(1)
        margin-right 100px
    span 
      font-size 14px
      color #333333
      padding-right 15px
      background url(img/del.png) no-repeat right
      background-size 8px
      margin-right 84px
    a
      width 122px
      height 34px
      line-height 34px
      text-align center
      text-decoration none 
      color #026bd6
      font-size 14px
      border 1px solid #026bd6
      border-radius 4px
  .news-list
    border-bottom 1px solid #dcdcdc
    display flex
    font-size 14px
    >.news-item
      padding 0 30px
      height 50px
      box-sizing border-box
      line-height 50px
      text-align center
      border-right 1px solid #dcdcdc
      &.active
        background #e85a47
        color #ffffff
.bodyer
  background #ffffff
  >.title
    padding 20px 30px
    font-size 20px
    color #333
    box-sizing border-box
    cursor pointer
  >.handle
    height 50px
    line-height 50px
    background #f6f6f6
    padding-left 10px
    >.checkbox
      margin-right 40px
    >.right
      float right
      margin-right 50px
      margin-top 7px
  .news
    .item
      height 160px
      border-bottom 1px solid #dcdcdc
      display flex
      &:first-of-type
        border-top 1px solid #dcdcdc
      .checkbox
        width 70px
        padding-left 10px
        padding-top 10px
        box-sizing border-box
      .time
        width 150px
        >div
          text-align center
          color #333
          font-size 14px
          &:first-of-type
            margin-top 65px
      .content
        flex 1
        border-left 1px solid #dcdcdc
        border-right 1px solid #dcdcdc
        .main
          display flex
          height 120px
          .pic
            width 145px
            border-right 1px solid #dcdcdc
            text-align center
            >.label
              font-size 14px 
            >.img
              width 60px
              height 60px
              border 1px solid #dcdcdc
              border-radius 50%
              margin 5px auto
              margin-top 20px
              background-repeat no-repeat
              background-size 100%
          .text
            flex 1
            padding 15px 30px
            .head
              overflow hidden
              height 35px
              line-height 35px
              .title
                color #000
                float left
                font-size 0.88rem
                cursor pointer
              .qx
                float right
                color #666
            .body
              padding-top 0.8rem
              color #666
              font-size 0.88rem
              height 60px
              overflow hidden
              line-height 1.9rem
        .imgbtns
          height 40px
          border-top 1px solid #dcdcdc
          .imbtn
            float right
            height 30px
            line-height 30px
            margin-top 5px
            border-left 1px solid #dcdcdc
            padding  0 45px
            font-size 14px #666
            cursor pointer
            &.add
              background url(img/brief-add.png) no-repeat
              background-position 10% 50%
            &.addActive
              background url(img/brief-addcheck.png) no-repeat left 10% center 
              color #8c97cb
              cursor default
.pagination
  text-align right
  padding 0.93rem 0.93rem
@media screen and (max-width: 1750px)
  .toper 
    .liuchen 
      >.right
        width 230px
@media screen and (max-width: 1560px)
  .checkchose
    >div
      &.time
        width 550px
      &.condi
        width 100px
</style>
